import React, { Component } from 'react';
import { user_register } from "../utils/api";

class Register extends Component {
  state = {
    phone: '',
    pass: '',
    checkpass: ''
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  register() {
    if (/^1[3-9]\d{9}$/.test(this.state.phone) == false) {
      alert('请输入正确的手机号')
    } else if (this.state.pass != this.state.checkpass) {
      alert('两次输入密码不一致!')
    } else {
      console.log(this.state);
      alert('验证通过');
      var {checkpass,...params} = this.state
      user_register(params).then((res)=>{
        console.log(res);
      })
    }
  }
  render() {
    return (
      <div className='login_register'>
        <div className="content-box">
          <div className="input-box">
            <input type="text" name="phone" value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder="请输入用户名" />
          </div>
          <div className="input-box">
            <input type="password" name="pass" value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder="请输入密码" />
          </div>
          <div className="input-box">
            <input type="password" name="checkpass" value={this.state.checkpass} onChange={(e) => { this.handleChange(e) }} placeholder="确认密码" />
          </div>
          <div className="button_1 span-box" onClick={() => { this.register() }}>
            <span>注册</span>
          </div>
          <div className="button_2 span-box">
            <span>登录</span>
          </div>
        </div>
      </div>
    );
  }
}
export default Register;